<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wxfa994e6d615933c2", "bba3e159317f6ff87d19cf18e4a9572f");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <title>语音识别</title>
  <link rel="stylesheet" href="wxvoice/style.css" media="screen" type="text/css" />
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      -webkit-user-select:none;
      user-select:none;
    }
    #startRecord {
      user-select:none;
        background: url(wxvoice/voice.png) no-repeat center center;
        width: 100px;
        height: 100px;
        border: none;
        position: absolute;
        bottom: 50px;
        left: 50%;
        margin-left: -50px;
    }
    .cancle {
        width: 150px;
        position: absolute;
        top: 100px;
        left: 50%;
        margin-left: -75px;
        display: none;
    }
    #commandImg {
        display: none;
    }
  </style>
</head>
<body>
    
    <canvas class="canvas"></canvas>
    <img src="wxvoice/cancle_voice.gif" alt="" class="cancle">
    <button type="button" id="startRecord"></button>
    <!-- <button onclick="begin()">开始</button>
    <button onclick="end()">结束</button> -->
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="wxvoice/zepto.min.js"></script>
<script src="wxvoice/index.js"></script>
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
  wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      "startRecord","stopRecord","translateVoice"
    ]
  });
  wx.ready(function (){
    // 在这里调用 API
    $("#startRecord").on("touchstart touchmove", function(event){
      $(".cancle").show();
      // event.preventDefault;
      // return false;
      wx.startRecord();
    }).on("touchend",function(){
      $(".cancle").hide();
      window.clearTimeout(loopTimeoutId);
      wx.stopRecord({
          success: function (res) {
              localId = res.localId;
              wx.translateVoice({
                localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    var result = res.translateResult; 
                  S.UI.simulate(result);
                  sendCommand(result);
                  loopDisplay();
                }
              });
          }
      });
    });

  });

  wx.error(function(){
    loopDisplay();
  });

  //阻止右键菜单
  $("body, .canvas").on("touchstart touchmove",function(event){
    event.preventDefault;
    return false;
  });

  function sendCommand(command){
    var image = document.getElementById("commandImg");
    if(image==null){
        var image = new Image();
        image.id="commandImg";
        image.src="http://123.56.30.22:8080/zxyh/sendVoiceText?text="+command+"&_t="+new Date().getTime();
        document.body.appendChild(image);
    }else{
        image.src="http://123.56.30.22:8080/zxyh/sendVoiceText?text="+command+"&_t="+new Date().getTime();
    }
  }

</script>
</html>
